<template>
	<view>
		<view class="buy-list-title">
			<text>购买列表</text>
			<text></text>
		</view>
		<u-line></u-line>
		<view class="buy-img" v-if="popList.length === 0">
			<image src="/static/imgs/noData.png"></image>
		</view>
		<view class="pop-box" v-else-if="popList.length !== 0">
			<view v-for="(i,index) in popList" :key="i.gID" class="buy-box">
				<view v-show="i.num !==0">
					<view class="goods-det">{{i.good_name}}
						<count :num="i.num" :gid="i.gid" :price="i.price" :index="index" @add="addinbuy"
							@reduce="redinbuy"></count>￥{{i.total}}
					</view>
				</view>

			</view>
			<u-line></u-line>
			<view class="btn-sub">
				总价：￥{{total}}
				<u-button type="primary" text="提交" @click="showMod = true"></u-button>
			</view>
		</view>
		<u-modal :show="showMod" @confirm="submit" ref="uModal" 
			showCancelButton @cancel="showMod=false" @close="showMod=false" title='提交订单'>
			<view class="slot-content">
				<view class="">
					<text class="title">1.请选择收货方式</text>
					<view class="flex-box">
						<u-radio-group v-model="radiovalue1">
						<u-radio placement="row" :customStyle="{marginRight: '10px'}"
							v-for="(item, index) in radiolist1" :key="index" :label="item.name" :name="item.name"
							@change="radioChange">
						</u-radio>
						</u-radio-group>
					</view>
					</u-radio-group>
					<text class="title">2.请选择预约时间</text>
					<view @click="showTimePick = true" class="time-box">
						{{ time || '--'}}
					</view>
				</view>
			</view>
		</u-modal>
		<u-datetime-picker :minDate="nowDate" @confirm="getAppoiTime" @cancel="showTimePick = false" :show="showTimePick" v-model="time" mode="datetime"></u-datetime-picker>
	</view>
</template>

<script>
	import {formatDateTime} from '@/utils/format.js'
	import {deliverinfo} from '@/common/http.api.js'
	import Count from '@/components/conut.vue'
	export default {
		components: {
			Count
		},
		data() {
			return {
				uname:'',
				nowDate:Number(new Date()),
				time: '',
				showTimePick: false,
				radiovalue1: '送货上门',
				radiolist1: [{
						name: '送货上门',
						disabled: false
					},
					{
						name: '自行取货',
						disabled: false
					},
				],
				reqData: {},
				showMod: false,
				popList: []
			}
		},
		computed: {
			total() {
				let total = 0
				this.popList.forEach(i => {
					total += i.total
				})
				return total
			},
		},
		onLoad(options) {
			this.popList = JSON.parse(options.list)
		},
		onShow() {
			this.uname = this.$store.state.userInfo.uname
		},
		methods: {
			async submit() {
				if(!this.time) return uni.$showMsg('请选择预约时间','none')
				uni.$loading()
				
				let good_nums = this.popList.map(i => i.num)
				let gIDs = this.popList.map(i => i.gID)
				this.reqData.uname = this.uname
				this.reqData.gIDs = gIDs
				this.reqData.good_nums = good_nums
				this.reqData.way = this.radiovalue1
				this.reqData.total = this.total
				this.reqData.uID = uni.getStorageSync('uID')
				this.reqData.appoi_time = this.time
				// console.log(this.reqData);
				const res = await deliverinfo(this.reqData)
				if(res.code === 0) uni.$showMsg('提交成功')
				this.showMod = false
				setTimeout(()=>{
					uni.navigateTo({
					url:'/pages/shop/shop'
				})
				},1500)
				
			},
			getAppoiTime(n){
				console.log(n);
				this.showTimePick = false
				this.$nextTick(()=>{
					this.time = formatDateTime(n.value)
				})
				this.time = formatDateTime(n.value)
				// this.time = this.time
				console.log(this.time);
			},
			radioChange(n) {
				this.reqData.way = n
				
			},
			// 已购中的逻辑
			addinbuy(index) {
				this.popList[index].num++
				// 区分每个独立的商品
				this.popList[index].total = this.popList[index].good_price * this.popList[index].num
			},
			redinbuy(index) {
				this.popList[index].num--
				// 区分每个独立的商品
				if (this.popList[index].num === 0) {
					this.popList = this.popList.filter(i => i.num !== 0)
					this.showGoods = false
				}
				this.popList[index].total = this.popList[index].good_price * this.popList[index].num
			}
		}
	}
</script>

<style lang="scss" scoped>
	.goods-det {
		display: flex;
		justify-content: space-between;
	}

	.buy-list-title {
		display: flex;
		justify-content: space-between;
		padding: 20rpx;
	}

	.buy-img {
		height: 800rpx;

		image {
			margin-left: 80rpx;
		}
	}

	.buy-box {
		margin: 20rpx;
	}

	.btn-sub {
		float: right;
		padding: 20rpx;
	}

	.title {
		display: block;
		margin: 20rpx 0;
		
	}

	.time-box {
		width: 100%;
		height: 60rpx;
		line-height: 60rpx;
		border-radius: 10rpx;
		background-color: #f5f7fa;
	}
</style>
